<template>
  <el-drawer
    v-model="visible"
    title="审批申请"
    size="40%"
    :with-header="true"
    :close-on-click-modal="false"
    :destroy-on-close="true"
  >
    <!-- 假勤部分 -->
    <div class="section">
      <h3 class="section-title">假勤</h3>
      <el-row :gutter="20">
        <el-col
          v-for="(item, index) in attendanceItems"
          :key="`attendance-${index}`"
          :xl="4"
          :lg="4"
          :md="6"
          :sm="8"
          :xs="12"
          class="section-item"
        >
          <div class="item-content" @click="handleItemClick(item.url)">
            <el-icon :size="30" class="item-icon">
              <component :is="item.icon" />
            </el-icon>
            <div class="item-text">{{ item.name }}</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 行政部分 -->
    <div class="section">
      <h3 class="section-title">行政</h3>
      <el-row :gutter="20">
        <el-col
          v-for="(item, index) in adminItems"
          :key="`admin-${index}`"
          :xl="4"
          :lg="4"
          :md="6"
          :sm="8"
          :xs="12"
          class="section-item"
        >
          <div class="item-content" @click="handleItemClick(item.url)">
            <el-icon :size="30" class="item-icon">
              <component :is="item.icon" />
            </el-icon>
            <div class="item-text">{{ item.name }}</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 财务部分 -->
    <div class="section">
      <h3 class="section-title">财务</h3>
      <el-row :gutter="20">
        <el-col
          v-for="(item, index) in financeItems"
          :key="`finance-${index}`"
          :xl="4"
          :lg="4"
          :md="6"
          :sm="8"
          :xs="12"
          class="section-item"
        >
          <div class="item-content" @click="handleItemClick(item.url)">
            <el-icon :size="30" class="item-icon">
              <component :is="item.icon" />
            </el-icon>
            <div class="item-text">{{ item.name }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Calendar, Location, MapLocation, Clock, Stamp, Document, Money, Ticket, DocumentChecked, Coin, CreditCard } from '@element-plus/icons-vue'

const visible = ref(false) // 控制抽屉显示

// 假勤部分内容
const attendanceItems = [
  { name: '请假', icon: Calendar, url: '/oa/leave-apply/create' },
  { name: '出差', icon: Location, url: '/oa/businesstripapply/create' },
  { name: '补卡', icon: MapLocation, url: '/oa/reissuecardapply/create' },
  { name: '加班', icon: Clock, url: '/oa/overtimeapply/create' }
]

// 行政部分内容
const adminItems = [
  { name: '用章申请', icon: Stamp, url: '/administration/seal-apply' },
  { name: '采购申请', icon: Document, url: '/administration/material/purchaseorder' },
  { name: '物品领用', icon: CreditCard, url: '/work/material-receive' },
]

// 财务部分内容
const financeItems = [
  { name: '费用报销', icon: Money, url: '/oa/work/feiyong/expense' },
  { name: '付款申请', icon: Ticket, url: '/oa/work/feiyong/payment' },
  // { name: '收票', icon: DocumentChecked, url: '/finance/receipt' },
  // { name: '无发票回款', icon: Coin, url: '/finance/no-invoice-receipt' },
  // { name: '无发票付款', icon: CreditCard, url: '/finance/no-invoice-payment' }
]

// 点击子项跳转
const handleItemClick = (url: string) => {
  if (url) {
    window.open(url, '_blank') // 打开对应页面
  }
}
</script>

<style scoped>
.section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
}

.section-item {
  text-align: center;
}

.item-content {
  cursor: pointer;
  padding: 16px 0;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  transition: all 0.3s;
}

.item-content:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.item-icon {
  margin-bottom: 8px;
  color: #409eff;
}

.item-text {
  font-size: 14px;
  color: #333;
}
</style>